<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div @click="back">
                  <i class="el-icon-arrow-left"></i
                  ><span class="nickname">{{ editForm.user_nickname }}</span>
                </div>
              </div>
            </div>
            <div class="user_bg_panel">
              <!-- 图片背景 -->
              <div class="user_bg_img">
                <img :src="editForm.user_bgimg" alt="" />
              </div>
            </div>
            <!-- 头像 信息 操作 -->
            <div class="user_profile">
              <div class="user_avatar">
                <img :src="editForm.user_headimg" alt="" />
              </div>
            </div>
            <!-- 昵称信息及相关操作按钮 -->
            <div class="user_box_item">
              <div>
                <div class="name">{{ editForm.user_nickname }}</div>
                <div class="account">@{{ editForm.account }}</div>
                <div class="user_fo_info">
                  <!-- 关注列表 -->
                  <div class="fo">
                    <router-link :to="'/YouFansList/' + user_id + '/4'">
                      <div class="txt">{{ $t("user.fo") }}</div>
                      <div>
                        <span>{{ user_fo }}</span>
                      </div>
                    </router-link>
                  </div>
                  <!-- 粉丝列表 -->
                  <div class="fans">
                    <router-link :to="'/YouFansList/' + user_id + '/2'">
                      <div class="txt">{{ $t("user.fans") }}</div>
                      <div>
                        <span>{{ user_fans }}</span>
                      </div>
                    </router-link>
                  </div>
                </div>
              </div>
              <div class="opr">
                <div class="ex-btn">
                  <!-- 编辑个人资料 -->
                  <button class="el_btn" @click="openEdit">{{ $t('personal.openedit') }}</button>
                </div>
              </div>
            </div>
            <!-- 头像 信息 操作结束 -->
            <!-- 其他信息 -->
            <div class="user_details">
              <div>
                <el-collapse v-model="open" accordion>
                  <el-collapse-item :title="$t('personal.introduce')" name="1">
                    <div>{{ editForm.user_info }}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
            <!-- 注册加入时间 -->
            <div class="reg_time">{{ user_regtime }} {{$t('personal.join')}}</div>
            <!-- 贴文分类tablist -->
            <!-- tablist -->
            <div class="tablist_panel">
              <div class="item" v-for="(item, index) in tabList" :key="index">
                <div class="item_pan" @click="doSelect(item.id)">
                  {{ item.name }}
                  <div :class="item.selected ? 'bar selected' : 'bar'"></div>
                </div>
              </div>
            </div>
            <!-- 其他分类内容 -->
            <div class="tablist_1" v-if="tablist_1">
              <PostListComponents ref="child" />
            </div>
            <div class="tablist_2" v-if="tablist_2">
              <PostReplyListComponents />
            </div>
            <div class="tablist_3" v-if="tablist_3">
              <PostMediaListComponents />
            </div>
            <div class="tablist_4" v-if="tablist_4">
              <PostLikeListComponents />
            </div>
          </div>
        </div>
      </div>
      <!-- 主页右侧模板 -->
      <MainRight />
      <!-- 编辑个人资料Dialog -->
      <el-dialog title="编辑个人资料" :visible.sync="editPersonalDialogVisible">
        <div>
          <div class="user_bg_panel">
            <!-- 隐藏上传控件 -->
            <input
              id="uploadbgimg"
              type="file"
              ref="p_bg_uploader"
              accept=".jpg, .jpeg, .bmp, .gif, .png"
              multiple="multiple"
              class="upload_hidden"
              @change="addBgUploadImg"
            />
            <!-- 图片背景 -->
            <div class="user_bg_img">
              <img :src="editForm.user_bgimg" alt="" />
            </div>
            <!-- 编辑按钮 -->
            <div
              class="edit_bg_panel"
              @click="addPreviewBgImgBtn"
              :title="$t('personal.edit_background')"
            >
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <path
                    d="M9.697 3H11v2h-.697l-3 2H5c-.276 0-.5.224-.5.5v11c0 .276.224.5.5.5h14c.276 0 .5-.224.5-.5V10h2v8.5c0 1.381-1.119 2.5-2.5 2.5H5c-1.381 0-2.5-1.119-2.5-2.5v-11C2.5 6.119 3.619 5 5 5h1.697l3-2zM12 10.5c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-4 2c0-2.209 1.791-4 4-4s4 1.791 4 4-1.791 4-4 4-4-1.791-4-4zM17 2c0 1.657-1.343 3-3 3v1c1.657 0 3 1.343 3 3h1c0-1.657 1.343-3 3-3V5c-1.657 0-3-1.343-3-3h-1z"
                  ></path>
                </g>
              </svg>
            </div>
          </div>
          <!-- 头像 信息 操作  -->
          <div class="user_profile">
            <div class="user_avatar">
              <!-- 隐藏上传控件 -->
              <input
                id="uploadhimg"
                type="file"
                ref="p_header_uploader"
                accept=".jpg, .jpeg, .bmp, .gif, .png"
                multiple="multiple"
                class="upload_hidden"
                @change="addHeaderUploadImg"
              />
              <img :src="editForm.user_headimg" alt="" />
              <!-- 编辑头像 -->
              <div
                class="edit_avatar_panel"
                @click="addPreviewHeaderImgBtn"
                :title="$t('personal.edit_headimg')"
              >
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <g>
                    <path
                      d="M9.697 3H11v2h-.697l-3 2H5c-.276 0-.5.224-.5.5v11c0 .276.224.5.5.5h14c.276 0 .5-.224.5-.5V10h2v8.5c0 1.381-1.119 2.5-2.5 2.5H5c-1.381 0-2.5-1.119-2.5-2.5v-11C2.5 6.119 3.619 5 5 5h1.697l3-2zM12 10.5c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm-4 2c0-2.209 1.791-4 4-4s4 1.791 4 4-1.791 4-4 4-4-1.791-4-4zM17 2c0 1.657-1.343 3-3 3v1c1.657 0 3 1.343 3 3h1c0-1.657 1.343-3 3-3V5c-1.657 0-3-1.343-3-3h-1z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
          </div>
          <!-- 编辑昵称 -->
          <div class="edit_nickname_panel">
            <el-input
              type="text"
              placeholder="请输入昵称"
              v-model="editForm.user_nickname"
              maxlength="30"
              show-word-limit
            >
              <template slot="prepend">{{ $t('personal.nickname') }}</template>
            </el-input>
          </div>
          <!-- 编辑个人介绍 -->
          <div class="edit_userinfo_panel">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="写点个人介绍"
              v-model="editForm.user_info"
              maxlength="255"
              show-word-limit
              ><template slot="prepend">{{$t('personal.introduce')}}</template>
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editPersonalDialogVisible = false"
            >{{ $t('personal.cancel') }}</el-button
          >
          <el-button type="primary" @click="saveEdit">{{ $t('personal.confirm') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </main>
</template>
<script>
import PostListComponents from "@/components/PostListComponents.vue";
import PostReplyListComponents from "@/components/PostReplyListComponents.vue";
import PostMediaListComponents from "@/components/PostMediaListComponents.vue";
import PostLikeListComponents from "@/components/PostLikeListComponents.vue";
//MainRight
import MainRight from "@/components/MainRight.vue";

//获取统一请求接口
import { EditPersonalInfo,getUserInfoByUserId } from "@/api";

export default {
  name: "EditPersonalMainContent",
  components: {
    PostListComponents,
    PostReplyListComponents,
    PostMediaListComponents,
    PostLikeListComponents,
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("user")).user_id,
      // userBackGroupImage: require("@/assets/img/p_bg.png"),
      // userHeaderImg: require("@/assets/img/user.png"),
      // nickname: "",
      // account: "",
      UserInfo: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
      },
      user_fo: "",
      user_fans: "",
      open: 1,
      user_info: "",
      user_regtime: "",
      decimals: 2, //保留小数位
      editPersonalDialogVisible: false, //编辑窗口
      editForm: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        account: JSON.parse(localStorage.getItem("user")).username
          ? JSON.parse(localStorage.getItem("user")).username
          : "账号",
        user_bgimg: JSON.parse(localStorage.getItem("user")).user_bgimg
          ? JSON.parse(localStorage.getItem("user")).user_bgimg
          : require("@/assets/img/p_bg.png"),
        user_bgimg_file: "",
        user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
          ? JSON.parse(localStorage.getItem("user")).user_headimg
          : require("@/assets/img/user.png"),
        user_headimg_file: "",
        user_nickname: "",
        user_info: "",
        bgimg_change: 0, //设定个人背景及头像是否改变，如果改变则调用上传接口
        headimg_change: 0,
      },
      tabList: [
        {
          id: 1,
          name: this.$t('personal.tab_post'),
          selected: true,
        },
        {
          id: 2,
          name: this.$t('personal.tab_reply'),
          selected: false,
        },
        {
          id: 3,
          name: this.$t('personal.tab_media'),
          selected: false,
        },
        {
          id: 4,
          name: this.$t('personal.tab_like'),
          selected: false,
        },
      ],
      tablist_1: true,
      tablist_2: false,
      tablist_3: false,
      tablist_4: false,
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.userData.currentPage >= this.userData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    //初始化
    initData() {
      this.getUserinfoById();
    },
    //刷新
    refleshload() {
      this.doSelect(1);
      this.$refs.child.reloadUserPostData();
      this.reloadUserInfoById();
    },
    //保存编辑个人资料
    saveEdit() {
      this.editUserPicFile();
      this.editPersonalDialogVisible = false;
      this.refleshload();
    },
    openEdit() {
      this.editPersonalDialogVisible = true;
    },
    //编辑提交个人资料-带文件上传
    async editUserPicFile() {
      //新建变量FormData
      const formData = new FormData();
      //添加信息数据
      formData.append("user_id", this.editForm.user_id);
      formData.append("user_nickname", this.editForm.user_nickname);
      formData.append("user_info", this.editForm.user_info);
      formData.append("user_bgimg", this.editForm.user_bgimg_file);
      formData.append("user_headimg", this.editForm.user_headimg_file);

      //调用带进度的文件上传请求方法
      let res = await EditPersonalInfo(formData);
      if (res.state == 200) {
        //显示上传文件的路径信息
        //刷新数据
        this.refleshload();
        //消息提示
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message({
          message: res.message,
          type: "warning",
        });
      }
    },
    //编辑提交个人资料-不文件上传
    editUserNoneFile() {},
    //根据用户id获取用户动态信息
    async getUserinfoById() {
      let res = await getUserInfoByUserId(this.UserInfo);
      // console.log(res);
      if (res.state == 200) {
        this.editForm.user_bgimg = res.data.user_bgimg
          ? res.data.user_bgimg
          : require("@/assets/img/p_bg.png");
        this.editForm.user_headimg = res.data.user_headimg
          ? res.data.user_headimg
          : require("@/assets/img/user.png");
        (this.editForm.user_nickname = res.data.user_nickname
          ? res.data.user_nickname
          : "昵称"),
          (this.editForm.account = res.data.username
            ? res.data.username
            : "账号"),
          (this.user_fo = this.formatCount(
            res.data.user_fo ? res.data.user_fo : 0
          ));
        this.user_fans = this.formatCount(
          res.data.user_fans ? res.data.user_fans : 0
        );
        this.editForm.user_info = res.data.user_info
          ? res.data.user_info
          : "该用户比较懒，什么都没写。";
        this.user_regtime = res.data.user_regtime ? res.data.user_regtime : "";
      }
    },
    async reloadUserInfoById() {
      let res = await this.$http.post("getInfoByUserId", this.UserInfo);
      if (res.state == 200) {
        this.$store.commit("user", JSON.stringify(res.data));
      }
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
    //tablist选则
    doSelect(sid) {
      //foreach遍历
      this.tabList.forEach((item) => {
        if (item.id == sid) {
          //设置tabTitle选中
          item.selected = true;
          //内容框可见
          this.showContent(sid);
        } else {
          item.selected = false;
        }
      });
    },
    showContent(id) {
      if (id == 1) {
        this.tablist_1 = true;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 2) {
        this.tablist_1 = false;
        this.tablist_2 = true;
        this.tablist_3 = false;
        this.tablist_4 = false;
      }
      if (id == 3) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = true;
        this.tablist_4 = false;
      }
      if (id == 4) {
        this.tablist_1 = false;
        this.tablist_2 = false;
        this.tablist_3 = false;
        this.tablist_4 = true;
      }
    },
    //点击触发上传预览图片按钮
    addPreviewBgImgBtn() {
      let _this = this;
      let input = _this.$refs.p_bg_uploader; // document.getElementById("uploadimg");
      input.click(); //模拟点击
    },
    //背景图片上传预览
    addBgUploadImg() {
      let _this = this;
      let input = _this.$refs.p_bg_uploader; // document.getElementById("uploadimg");
      let reader = new FileReader();
      let file = input.files[0];
      const limitSize = file.size / 1024 / 1024 < 2;
      if (!limitSize) {
        _this.$message({
          message: "上传图片限制最大为2MB",
          type: "warning",
        });
        return;
      }
      reader.readAsDataURL(file);
      reader.onload = function () {
        let imgsrc = reader.result; //this.result
        _this.editForm.user_bgimg = imgsrc;
        _this.editForm.user_bgimg_file = file;
        _this.editForm.bgimg_change = 1;
      };
    },
    //点击触发头像上传按钮
    addPreviewHeaderImgBtn() {
      let _this = this;
      let input = _this.$refs.p_header_uploader; // document.getElementById("uploadimg");
      input.click(); //模拟点击
    },
    //头像上传预览
    addHeaderUploadImg() {
      let _this = this;
      let input = _this.$refs.p_header_uploader; // document.getElementById("uploadimg");
      let reader = new FileReader();
      let file = input.files[0];
      const limitSize = file.size / 1024 / 1024 < 2;
      if (!limitSize) {
        _this.$message({
          message: "上传图片限制最大为2MB",
          type: "warning",
        });
        return;
      }
      reader.readAsDataURL(file);
      reader.onload = function () {
        let imgsrc = reader.result; //this.result
        _this.editForm.user_headimg = imgsrc;
        _this.editForm.user_headimg_file = file;
        _this.editForm.headimg_change = 1;
      };
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
  position: relative;
}

.back_page {
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -38px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  cursor: pointer;
  display: flex;
}

.nickname {
  font-weight: 700;
}

.user_box_item .account {
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 400;
  margin: 5px 0 10px 0;
}

.reg_time {
  display: flex;
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 400;
  margin: 15px 18px;
}

.user_bg_img {
  position: relative;
  height: 361px;
  flex: 1;
}

.user_bg_img img {
  object-fit: cover;
  border-radius: inherit;
  max-height: 361px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.user_profile,
.user_box_item {
  margin: 10px 20px 10px 22px;
  display: flex;
  position: relative;
}

.user_avatar {
  margin: -50px 20px 0 0;
  padding: 1px;
  background: #fff;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  z-index: 10;
  position: relative;
}

.user_avatar img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

/* 个人信息 */
.user_box_item {
  display: flex;
  justify-content: space-between;
  /* 子容器设置flex:1 自动占据改行全部空间 */
  flex: 1;
}

.user_box_item .name {
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
}

.user_box_item .user_fo_info {
  display: flex;
  font-size: 14px;
  color: #939393;
}

.user_fo_info .fans {
  margin-right: 15px;
}

.fans,
.fo {
  display: flex;
  line-height: 16px;
  margin-right: 15px;
}

.fans a,
.fo a {
  display: flex;
  color: #000000;
  font-weight: 700;
}

.fo a .txt,
.fans a .txt {
  color: #939393;
  margin-right: 5px;
}

.user_box_item .opr {
  display: flex;
}

.opr .ex-btn,
.opr .ex-message {
  margin-right: 10px;
}

/* 详细信息内容 */
.user_details {
  display: flex;
  padding: 15px 18px;
}

.user_details > div {
  flex: 1;
}

.is-active {
  font-weight: bold;
}

/* 新增帖子数量样式 */
.post_new_counts {
  text-align: center;
  border-bottom: 1px solid rgb(239, 243, 244);
  line-height: 48px;
  color: rgb(29, 155, 240);
  cursor: pointer;
}

/* tablist */
.tablist_panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  line-height: 54px;
  height: 54px;
  color: rgb(83, 100, 113);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgb(239, 243, 244);
}

.tablist_panel .item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.tablist_panel .item .item_pan {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 54px;
  width: 100%;
}

.item_pan .bar {
  position: absolute;
  border-radius: 2px;
  align-self: center;
  height: 4px;
  min-width: 54px;
  bottom: 0px;
}

.item_pan .selected {
  background-color: rgb(29, 155, 240);
}

.tablist_panel .item:hover {
  cursor: pointer;
  background-color: rgba(15, 20, 25, 0.1);
}

.tablist_1 {
  min-height: 500px;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}

/* 编辑按钮样式 */
.el_btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 20px;
}

.el_btn:hover {
  color: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255);
  background: rgba(64, 158, 255, 0.1);
}

/* 编辑弹出框 */
.editPersonalDialog {
  width: 600px;
}

.edit_bg_panel,
.edit_avatar_panel {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 修正偏移 */
  margin: -21px 0 0 -21px;
  width: 42px;
  height: 42px;
  background: rgba(15, 20, 25, 0.3);
  border-radius: 50%;
  text-align: center;
  line-height: 53px;
  cursor: pointer;
}

.edit_bg_panel:hover,
.edit_avatar_panel:hover {
  background: rgba(15, 20, 25, 0.2);
}

.edit_bg_panel svg {
  width: 22px;
  height: 22px;
}

.edit_avatar_panel svg {
  width: 22px;
  height: 22px;
}

.edit_nickname_panel,
.edit_userinfo_panel {
  margin: 18px 0;
}

/* 默认隐藏上传输入框 */
.upload_hidden {
  display: none;
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }

  .user_avatar img {
    width: 60px;
    height: 60px;
  }

  .user_fo_info .fans {
    margin-right: 10px;
  }

  .fans,
  .fo {
    font-size: 12px;
    display: block;
  }

  .fans a,
  .fo a {
    margin-left: 0px;
  }

  .main-content /deep/ .el-dialog {
    width: 100%;
  }

  .user_bg_img img {
    height: 361px;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
  .editPersonalDialog {
    width: 600px;
  }
}

@media (max-width: 1300px) {
  .editPersonalDialog {
    width: 600px;
  }
}
</style>
  <style>
/* 覆盖 element ui 样式 */
.el-tabs__item {
  font-size: 18px !important;
}

.el-tabs__item.is-active {
  font-weight: bold;
  color: #000000 !important;
}

.el-tabs__header {
  /* 黏性定位 */
  position: sticky !important;
  top: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 199;
}
</style>